<script setup>
import closeIcon from '../assets/close.svg?component'

</script>

<template>
    <div id="addTasks">
        <div id="newSchedule" class="rounded-3xl p-5">

            <header class="flex justify-between items-center">
                <div class="flex">
                    <div class="w-2 self-stretch mr-2 my-2 rounded-xl bg-[#b2d9d6]"></div>
                    <span class="text-3xl p-3 text-[#585858]">The new schedule</span>   
                </div>
                <closeIcon></closeIcon>
            </header>

            <main id="mess">  
                <form >
                    <input type="text"
                       class="addMess"
                       placeholder="Title."
                       v-model ="taskName"
                    />
                    <input type="text"
                       class="addMess"
                       placeholder="Time."
                       v-model ="taskTime"
                    />
                    <input type="text"
                       class="addMess"
                       placeholder="Note."
                       v-model ="taskDe"
                    />
                    <button id="setupButt" @click="creatTask()">SET UP</button>
                </form>
            </main>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            token:'',
            taskName:'',
            taskDescription:'',
            taskStartAt:'',
            taskendedAt:''
        };
    },
    created(){
        this.token =  localStorage.getItem('token');
        var taskendedAt = new Date();
    },
    methods:{
        close(){
            this.showModel = !this.showModel;
            //console.log(this.showModel);
        },
        creatTask(){
            axios.post('http://49.232.214.76/normal/createTask',{
                header:{
                    'Authorization': 'Bearer ' + this.token,
                },
                data:{
                    "name": this.taskName,
                    "description": this.taskDe,
                    "mid": 0,
                    "startAt": this.taskendedAt,
                    "endedAt": this.taskTime,
                }
            }).then(res=>{
                console.log(res);
            })
        }
    }
}
</script>

<style>
    #addTasks{
        background: rgba(112, 112, 112, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
    }
    #newSchedule{
        display: table;
        position: fixed;
        left: 33%;
        top:33%;
        width: 37.5rem;
        height: 18.75rem;
        background: white;
        opacity: 1;
        z-index: 30;
    }

    .addMess{
        margin: 0.625rem auto;
        margin-left: 6.25rem;
        margin-right: 6.25rem;
        width: 25rem;
        border-bottom: 0.0625rem solid #888888;
        color:#888888;
    }
    #setupButt{
        margin: 0.625rem auto;
        margin-left: 9.375rem;
        margin-right: 9.375rem;
        color:white;
        border-radius: 1.875rem;
        width: 18.75rem;
        height: 1.875rem;
        background: linear-gradient(to left,#f2c2b6,#b2d9d6);
    }
    #setupButt:hover{
        box-shadow: 0px 0px 20px #888888;
    }
</style>